<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<style>
    ul.ztree {
        border: 1px solid #ccc;
        background-color: #fff;
        height: 400px;
        overflow-y: scroll;
        overflow-x: auto;
    }
</style>
<!-- Content Header (Page header) -->
<section class="content-header" style="">
    <h1>
        验证码推送记录
        <small>工号验证码消息推送管理</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="#">生产管理</a></li>
        <li class="active">验证码推送管理</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <div id="toolbar">
                        <form class="form-inline" id="searchForm">
                            <div class="form-group">
                                <label for="searchSubscribe">订阅用户</label>
                                <input type="text" class="form-control input-sm" name="subscribe" id="searchSubscribe"
                                       placeholder="请输入订阅用户">
                            </div>
                            <div class="form-group">
                                <label for="searchPublish">工号</label>
                                <input type="text" class="form-control input-sm" name="publish" id="searchPublish"
                                       placeholder="请输入用户名">
                            </div>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-default"
                                        onclick="javascript:$('table').bootstrapTable('refresh', {silent: true});">
                                    <i class="glyphicon glyphicon-search"></i>
                                    查询
                                </button>
                                <button type="reset" class="btn btn-default">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    清空
                                </button>
                            </div>
                        </form>
                        <div class="btn-group btn-group-sm">
                            <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                            <button shiro:hasPermission="verifypubsub:create" type="button" id="addBtn"
                                    class="btn btn-default"
                                    data-toggle="modal"
                                    data-target="#addModal"><i class="glyphicon glyphicon-plus"></i> 订阅
                            </button>
                        </div>
                    </div>
                    <!--<p id="user" th:text="${user}">Some text here...</p>-->
                    <table id="table"></table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->

<!-- add Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="addModalLabel">订阅工号：接收工号验证码</h4>
            </div>
            <div class="modal-body">
                <form id="addForm">
                    <input type="hidden" id="subscribe" name="subscribe">
                    <input type="hidden" id="subscribeName" name="subscribeName">
                    <div class="form-group">
                        <label class="control-label" for="resourceIds"><span class="asterisk">*</span>订阅验证码列表:</label>
                        <input type="hidden" id="resourceIds" name="publishIds" required>
                        <input type="text" class="form-control" id="resourceName" name="publishNames" readonly required>
                        <div class="help-block with-errors"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="addForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#addForm',url:'@{/verifypubsub/create}',after:'$.myAction.refreshTable'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>


<!--#弹窗-->
    <!-- show Modal -->
    <div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="showModalLabel">收到新消息</h4>
                </div>
                <div class="modal-body">
                    <form id="showForm">
                        <label id="showMsg"></label>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
<!-- zTree -->
<div id="menuContent" class="menuContent" style="display:none;z-index:1989101600;position: absolute;">
    <ul id="tree" class="ztree" style="margin-top:0;"></ul>
</div>

<!--<#&#45;&#45;播放音乐&ndash;&gt;
    <audio id="notice" loop="loop">
        <source src="/sell/mp3/song.mp3" type="audio/mpeg" />
    </audio>-->


<script th:src="@{/static/js/websocket/sockjs.min.js}"></script>
<script th:src="@{/static/js/websocket/stomp.min.js}"></script>
<script th:inline="javascript">

    var $table = $('#table');

    $(function () {
        // bootstrap table初始化
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        $table.bootstrapTable({
            url: CONTEXT_PATH + '/verifycode/list',
            idField: 'id',
            searchOnEnterKey: false,
            sidePagination : 'server',
            columns: [
                {field: 'state', checkbox: true},
                {field: 'id', title: '编号', sortable: true, halign: 'left'},
                {field: 'publish', title: '发送工号', sortable: true, halign: 'left'},
                {field: 'content', title: '发送内容', sortable: true, halign: 'left'},
                {field: 'subscribe', title: '接收用户', sortable: true, halign: 'left'},
                {field: 'ctype', title: '类型', sortable: true, halign: 'left',formatter: 'sendType'},
            ]
        });
    });

    <!--短信验证码订阅-->
    var nickName =$("#nickName").val();
    var user = $("#headUserName").text();
    <!--订阅hidder赋值-->
    $("#subscribe").val(user);
    $("#subscribeName").val(nickName);
    var sock = new SockJS("/wximp/endpointP2P");
    var stomp = Stomp.over(sock);
    stomp.connect(user, user, function (frame) {

        /**  订阅了/user/queue/notifications 发送的消息,这里雨在控制器的 convertAndSendToUser 定义的地址保持一致, 
         *  这里多用了一个/user,并且这个user 是必须的,使用user 才会发送消息到指定的用户。 
         *  */
        stomp.subscribe("/user/queue/notifications", handleNotification);
    });

    function handleNotification(message) {
        console.log('收到消息:' + message.body);
        var msgJson = $.parseJSON(message.body);
        var html = "工号："+msgJson.publisherName+"<br>";
          html += "账号："+msgJson.publisher+"<br>";
          html +="接收时间"+msgJson.time+"<br>";
          html +="内容："+msgJson.content;
        $('#showMsg').html(html);
        $('#showModal').modal('show');

    }


    // 数据表格展开内容
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }

    function addBefore(obj) {
        $.fn.zTree.getZTreeObj("tree").destroy();
        $.fn.zTree.init($("#tree"), setting, zNodes);
    }

    function editAfter(obj, row) {
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        treeObj.destroy();
        $.fn.zTree.init($("#tree"), setting, zNodes);
        treeObj.expandAll(true);
    }

    function actionFormatter(value, row, index) {
        return $('#actionButtons').html();
    }
   function sendType(value, row, index) {
       var html = "";
       switch (value) {
           case 'all':
               html = '<span style="color:#00FF00">' + '通知' + '</span>';
               break;
           case 'p2p':
               html = '<span style="color:#FF0000">' + '专属' + '</span>';
               break;
           default:
               html = '<span style="color:#ffd23c">' + '未知' + '</span>';
       }
       return html;
   }

    var setting = {
        check: {
            enable: true,
            chkboxType: {"Y": "", "N": ""}
        },
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onCheck: onCheck,
            beforeCheck : function(treeId, treeNode) {
                if (treeNode.isParent) {
                    alert("请选择子节点！",0);
                    return false;
                }
            }
        }
    };
      var jobNoList = [[${jobNoList}]];
    var zNodes = [];
    for (var i in jobNoList) {
        zNodes.push({
            id: jobNoList[i].id,
            pId: jobNoList[i].pid,
            name: jobNoList[i].name,
            acccount4a: jobNoList[i].acccount4a,
            accountNo: jobNoList[i].accountNo
        });
    }
    //console.log("ztree node节点："+JSON.stringify(zNodes));
    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree"),
            nodes = zTree.getCheckedNodes(true),
            id = "",
            name = "";

        if(nodes.length>3){
            treeNode.checked=false;
            alert("订阅验证码工号不能超过3个！！");
        }

        nodes.sort(function compare(a, b) {
            return a.id - b.id;
        });
       //var diyDom = $.fn.zTree.getZTreeObj("tree").getSelectedNodes()
        //console.log(JSON.stringify(diyDom));
       // console.log(JSON.stringify(nodes));

        for (var i = 0, l = nodes.length; i < l; i++) {
            id += nodes[i].id%1000 + ",";
            name += nodes[i].name + ",";
        }

        if (id.length > 0) id = id.substring(0, id.length - 1);
        if (name.length > 0) name = name.substring(0, name.length - 1);

        $("#resourceIds").val(id);
        $("#resourceName").val(name);
/*        $("#editResourceIds").val(id);
        $("#editResourceName").val(name);*/
        // hideMenu();
    }

    function showMenu() {
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        var cityObj = $("#resourceName");
        var cityOffset = $("#resourceName").offset();
        $("#menuContent").css({left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight()}).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }

   /* function showMenuOfEdit() {
        var resourceIds = $('#editResourceIds').val();
        var resourceIdList = resourceIds.split(',');
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        for (var i in resourceIdList) {
            var id = resourceIdList[i];
            var node = treeObj.getNodeByParam("id", id, null);
            if (node === null) continue;
            treeObj.checkNode(node, true, true);
        }
        var cityObj = $("#editResourceName");
        var cityOffset = $("#editResourceName").offset();
        $("#menuContent").css({left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight()}).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }*/

    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }

    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }

    $.fn.zTree.init($("#tree"), setting, zNodes);
    $("#resourceName").click(showMenu);
   // $("#editResourceName").click(showMenuOfEdit);
</script>
</html>